<template>
    <div class="import">
        <!-- 合规条款导入 -->
        <el-dialog title="合规卡导入" :visible.sync="dialogVisible" width="45%" :close-on-click-modal="false">
            <div v-loading="isUpload" element-loading-text="文件导入中..." class="box-body">
                <div class="box-card">
                    <div style="display: flex">
                        <el-upload
                            :multiple="true"
                            :action="actionUrl"
                            :headers="headerObj"
                            :with-credentials="true"
                            list-type="text"
                            :show-file-list="false"
                            accept=".xlsx,.xls"
                            :data="paramData"
                            :disabled="disabledAll"
                            :before-upload="
                                (res, file, fileList) => {
                                    return uploadFileBefore(res, file, fileList);
                                }
                            "
                            :on-success="
                                (res, file, fileList) => {
                                    return uploadFileSuccess(res, file, fileList, '执行标准');
                                }
                            "
                            :on-error="
                                (res, file, fileList) => {
                                    return uploadFileError2(res, file, fileList);
                                }
                            "
                            :on-accept="
                                (res, file, fileList) => {
                                    return uploadFileError(res, file, fileList);
                                }
                            "
                        >
                            <el-button size="small" type="primary" style="border: none" :disabled="disabledAll || isUpload">添加文件</el-button>
                        </el-upload>
                        <el-button size="small" type="primary" style="margin-left: 20px" @click="downLoadFileModule">导入模板下载</el-button>
                    </div>
                </div>
                <div class="box-count">
                    <span>导入总数量：{{ fileList1.total }}</span>
                    <span>导入成功数量：{{ fileList1.success }}</span>
                    <span> 导入失败数量：{{ fileList1.fail }} </span>
                    <el-button type="primary" size="small" @click="downLoadErrorFileBtn" :disabled="fileList1.fileNo == 0"
                        >导入失败明细下载</el-button
                    >
                </div>
                <span>注：导入时，仅更新当前界面已存在的合规卡所对应的条目相关信息</span>
                <h3>校验提示</h3>
                <div class="box-verify">
                    {{ verifyContent }}
                </div>
            </div>

            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">关 闭</el-button>
                <el-button type="primary" @click="$emit('emitConfirmImportFile')">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Watch, Prop } from 'vue-property-decorator';
import { getConfigItem } from '@/utils/tools';
import { getUser } from '@/utils/user-util';
import { downLoadFile } from '@/utils/request';
import API from '../../api';
@Component({
    name: 'CardImportFile',
    components: {},
})
// 页面接口和页面还没对
export default class CardImportFile extends Vue {
    @Prop() visible;
    @Prop() treeNodeData;
    BASE_URL_API = getConfigItem('BASE_URL_API');
    private dialogVisible: boolean = false;
    private actionUrl = ''; // 附件上传url
    verifyContent: any = '';
    fileList1 = {
        fail: '',
        fileNo: '',
        success: '',
        total: '',
    };
    paramData = {}; // 上传额外参数
    headerObj = {
        Authentication: getUser().sessionId,
    };
    isUpload = false;
    @Watch('visible')
    async watchimportFileDialog(val) {
        this.dialogVisible = val;
        const baseUrl = this.BASE_URL_API;
        this.actionUrl = baseUrl + '导入url';

        if (val) {
            this.getFileNo();
            this.paramData = {
                jsonData: JSON.stringify({ articleCode: this.treeNodeData.id, indexType: this.treeNodeData.indexType }),
            };
        } else {
            this.fileList1 = {
                fail: '',
                fileNo: '',
                success: '',
                total: '',
            };
        }
    }

    @Watch('dialogVisible')
    watchDialogVisible(val) {
        if (val == false) {
            this.$emit('emitImportFile', val);
        }
    }

    getFileNo() {
        this.$axios.get(`/zhiguan/indexClause/fail/fileNo/${this.treeNodeData.indexType}`).then((res: any) => {
            if (res.uploadFilePO) {
                if (res.uploadFilePO.fileNo != 0) {
                    this.fileList1 = {
                        fail: res.fail,
                        success: res.success,
                        total: res.total,
                        fileNo: res.uploadFilePO.fileNo,
                    };
                }
            }
        });
    }

    /**
     * 导入失败明细下载
     */
    downLoadErrorFileBtn() {
        API.downLoadFileImportTemError();
    }

    /**
     * 导入模板下载
     */
    downLoadFileModule() {
        API.downLoadFileImportTem();
    }

    uploadFileBefore(res, file, fileList) {
        console.log('0000====');
        this.isUpload = true;
    }

    // 文件上传
    uploadFileSuccess(res, file, fileList, type) {
        if (res && res.returnCode === '000005') {
            this.yh_message_error(res.returnMsg || '导入失败!');
            this.isUpload = false;
            return;
        }

        if (res && res.returnCode === '000000') {
            this.yh_message_success('导入完成!');
        }
        this.isUpload = false;
        // 文件这里的比对TODO
        this.fileList1 = {
            fail: res.data.fail,
            success: res.data.success,
            total: res.data.total,
            fileNo: res.data.uploadFilePO.fileNo,
        };

        if (this.fileList1.success && Number(this.fileList1.success) > 0) {
            // this.$emit('emitImportFile', true, true);
        }
    }

    uploadFileError(res) {
        this.yh_message_warn('文件格式有误');
        this.isUpload = false;
    }

    uploadFileError2(res, file, fileList) {
        this.yh_message_error('导入失败!');
        this.isUpload = false;
    }
}
</script>
<style lang="scss" scoped>
.import {
    background: #ffffff;
}
.box-body {
}
.box-card {
    width: 100%;
}
.box-count {
    margin: 20px 0;
    span {
        margin-right: 30px;
        &:nth-child(2) {
            color: green;
        }
        &:nth-child(3) {
            color: red;
        }
    }
}
h3 {
    width: 70px;
    height: 30px;
    position: relative;
    top: 18px;
    left: 8px;
    text-align: center;
    background: #fff;
}
.box-verify {
    border: 1px dashed #575757;
    height: 200px;
}
.radioType {
    margin-top: 30px;
    display: flex;
    justify-content: space-between;
}
</style>
